<template>
  <div v-loading="loading">
    <collapse-tab>
      <el-form :inline="true" label-width="80px">
        <el-form-item label="当前工序">
          <el-select v-model="selectUnit" @change="changeUnitOption">
            <el-option v-for="unit in unitList" :key="unit.id" :value="unit.id" :label="unit.label" />
          </el-select>
        </el-form-item>
      </el-form>
    </collapse-tab>
    <div id="vue-full-calendar" style="margin-top:10px;" />
    <el-dialog
      :visible.sync="showFilterDialog"
      width="600px"
    >
      <span slot="title">
        <div style="padding:20px;">过滤</div>
      </span>
      <el-form label-position="left" label-width="80px">
        <el-form-item label="班组">
          <el-select v-model="selectTeam" placeholder="请选择班组" @change="changeTeamOption">
            <el-option v-for="team in teams" :key="team.id" :label="team.name" :value="team.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="人员">
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group
            v-model="selectUsers"
            @change="handleUserChange"
          >
            <el-checkbox v-for="user in teamUsers" :key="user.id" :label="user.id">{{ user.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-button type="primary" style="float:right;" @click="doFilter">确定</el-button>
        <div class="clearfix" />
      </el-form>
    </el-dialog>
    <el-dialog
      :visible.sync="showChangeDialog"
      width="850px"
      @open="initSchedule"
    >
      <span slot="title">
        <div style="padding:20px;">调整</div>
      </span>
      <div class="change-dialog">
        <div class="left-tab">
          <el-form label-position="top" label-width="80px">
            <el-form-item label="组织机构">
              <el-cascader
                v-model="selectedOrgIdArr"
                placeholder="请选择"
                :options="treeData"
                :props="cascaderProps"
                expand-trigger="click"
                change-on-select
                style="width:200px"
                :show-all-levels="false"
                disabled
                @visible-change="parentChanged"
              />
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker
                v-model="changeForm.shiftDate"
                type="date"
                align="right"
                style="width:200px"
              />
            </el-form-item>
            <el-form-item label="班次">
              <el-select v-model="changeForm.shift" placeholder="请选择班次">
                <el-option
                  v-for="item in shiftList"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="最后修改人">
              <el-input v-model="changeForm.updateName" disabled />
            </el-form-item>
            <el-form-item label="最后修改时间">
              <el-input v-model="changeForm.updateTime" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="right-tab">
          <el-form v-model="changeForm" label-position="left" :inline="true" label-width="80px">
            <el-form-item label="当前班组" style="float:left;">
              <el-input v-model="changeForm.currentTeamName" style="width:199px;" readonly>
                <el-button slot="append" icon="el-icon-refresh" @click="changeTeam" />
              </el-input>
            </el-form-item>
            <el-form-item label="任务归属" style="float:right;">
              <el-input v-model="changeForm.teamName" disabled />
            </el-form-item>
            <el-form-item style="width:100%;" label-width="100%">
              <div slot="label" style="margin-right: -2px;margin-bottom:10px;">
                <span>人员配置</span>
                <div style="float:right;">
                  <el-button type="primary" size="small" style="margin-right:10px;" @click="changeUsers">新增</el-button>
                  <el-button type="primary" size="small" @click="deleteSelectPoolUsers">删除</el-button>
                </div>
              </div>
              <div class="user-pool">
                <span v-for="user in changeForm.shiftUserList" :key="user.userId" :class="{'user': true, 'hightlight': selectPoolUsers.has(user.userId)}" @click="toggleSelectPoolUser(user.userId, $event)">{{ user.userName }}<br>{{ user.teamName }}</span>
              </div>
            </el-form-item>
            <el-form-item style="width:100%;" label-width="100%">
              <div slot="label">
                <span>变更原因</span>
              </div>
              <el-input type="textarea" :rows="4" :autosize="{minRows:4, maxRow: 6}" style="width:570px;" />
            </el-form-item>
            <el-form-item style="width:100%;">
              <div style="width:570px;">
                <el-button type="primary" style="float:right;" @click="doChange">确定</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="clearfix" />
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="showChangeUsersDialog"
      width="700px"
    >
      <span slot="title">
        <div style="padding:20px;">新增人员</div>
      </span>
      <el-form label-position="left" label-width="80px">
        <el-form-item label="组织机构">
          <el-cascader
            v-model="selectedOrgIdArr"
            placeholder="请选择"
            :options="treeData"
            :props="cascaderProps"
            expand-trigger="click"
            change-on-select
            style="width:200px"
            :show-all-levels="false"
            disabled
            @visible-change="parentChanged"
          />
        </el-form-item>
        <el-form-item label="班组">
          <el-select v-model="selectTeam">
            <el-option v-for="team in teams" :key="team.id" :value="team.id" :label="team.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="人员">
          <el-transfer :data="transferUsers" />
        </el-form-item>
        <el-button type="primary" style="float:right;" @click="doChangeUsers">确定</el-button>
        <div class="clearfix" />
      </el-form>
    </el-dialog>
    <el-dialog
      :visible.sync="showChangeTeamDialog"
      width="700px"
    >
      <span slot="title">
        <div style="padding:20px;">调整班组</div>
      </span>
      <el-form label-position="left" label-width="80px">
        <el-form-item label="当前班组">
          <el-input v-model="changeForm.currentTeamName" readonly />
        </el-form-item>
        <el-form-item label="目标班组">
          <el-radio-group v-model="changeForm.currentTeam">
            <el-radio v-for="team in teams" :key="team.id" :label="team.id" :disabled="changeForm.currentTeamName === team.name">{{ team.name }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-button type="primary" style="float:right;" @click="doChangeTeam">确定</el-button>
        <div class="clearfix" />
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import 'fullcalendar'
import 'fullcalendar/dist/fullcalendar.css'
import CollapseTab from '@/components/CollapseTab'
import { getTreeDeepArr } from '@/utils/tree'
import { getItemByTypeCode } from '@/utils/dictionary'

export default {
  name: 'calendar',
  components: {
    CollapseTab
  },
  data() {
    const data = []
    for (let i = 0; i < 5; i++) {
      data.push({
        key: i,
        label: '张三' + i
      })
    }
    return {
      loading: false,
      // 工序选项
      unitList: [],
      selectUnit: '',
      selectUnitName: '',
      month: '',
      // 过滤功能弹框
      showFilterDialog: false,
      teams: [],
      selectTeam: '',
      teamUsers: [],
      selectUsers: [],
      isIndeterminate: false,
      checkAll: false,
      // 排班表对象
      calendar: null,
      events: [],
      // 人员、班组视图切换
      viewUser: true,
      // 调整弹框
      scheduleId: '',
      cascaderProps: {
        value: 'id'
      },
      treeData: [{
        id: '',
        label: '',
        children: [],
        code: ''
      }],
      selectedOrgIdArr: null,
      shiftList: [],
      selectPoolUsers: new Set(),
      // 修改弹框表单
      changeForm: {
        currentTeam: '',
        currentTeamName: '',
        modifyFlag: '',
        shift: '',
        shiftDate: '',
        shiftUserList: [],
        team: '',
        teamName: '',
        unitId: '',
        unitName: '',
        updateName: '',
        updateTime: ''
      },
      showChangeDialog: false,
      // 人员弹框
      showChangeUsersDialog: false,
      transferUsers: data,
      transferSelectUsers: [],
      // 班组弹框
      showChangeTeamDialog: false
    }
  },
  computed: {
    defaultConfig() {
      const self = this
      return {
        firstDay: 1, // 以周日为每周的第一天
        // weekends: true, //是否在日历中显示周末
        locale: 'zh-cn', // 语言
        defaultView: 'month', // 默认按月显示
        fixedWeekCount: false, // 是否固定显示六周
        // weekMode:"liquid", //周数不定，每周的高度可变，整个日历高度不变
        allDaySlot: false,
        customButtons: {
          filter: {
            text: '过滤',
            click: function() {
              self.showFilterDialog = true
            }
          },
          view: {
            text: '班组',
            click: function(event) {
              self.viewUser = !self.viewUser
              self.$(event.target).html(self.viewUser ? '班组' : '人员')
            }
          }
        },
        header: {
          left: '',
          center: 'title',
          right: 'prev,next,view,filter'
        },
        editable: false,
        selectable: false,
        selectHelper: false,
        height: 'auto',
        contentHeight: 'auto',
        aspectRatio: 1.8,
        timeFormat: 'HH:mm',
        // events: [],
        events(start) {
          const curMonth = start.add(7, 'days').format('YYYY-MM')
          self.month = curMonth
          self.getEvents()
        },
        // 视图渲染完毕回调
        viewRender() {
          if (self.viewUser) {
            self.$('.fc .fc-view-container .fc-month-view .fc-bg .users').removeClass('hidden')
            self.$('.fc .fc-view-container .fc-month-view .fc-scroller .fc-row').css('height', '205px')
          } else {
            self.$('.fc .fc-view-container .fc-month-view .fc-bg .users').addClass('hidden')
            self.$('.fc .fc-view-container .fc-month-view .fc-scroller .fc-row').css('height', '100px')
          }
        },
        dayClick(...args) {
          const target = self.$(args[1].target)
          if (target.hasClass('fc-other-month')) {
            return
          }
          const moment = args[0]
          const currentDay = moment.format('YYYY-MM-DD')
          const events = self.events.filter(event => event.start === currentDay)
          const nightTarget = target.closest('.night')
          const dayTarget = target.closest('.day')
          const middleTarget = target.closest('.middle')
          let result = null
          if (!self._.isEmpty(nightTarget)) {
            result = events.find(event => event.shiftName === '夜班')
          } else if (!self._.isEmpty(dayTarget)) {
            result = events.find(event => event.shiftName === '白班')
          } else if (!self._.isEmpty(middleTarget)) {
            result = events.find(event => event.shiftName === '中班')
          }
          console.log('events', result)
          // 当前点击下没有排班数据
          if (!result) {
            self.$message.error('请选择有效的排班信息')
          } else {
            self.scheduleId = result.scheduleId
            self.showChangeDialog = true
          }
        },
        dayRender(...args) {
          if (args[1].hasClass('fc-other-month')) {
            return
          }
          const moment = args[0]
          const currentDay = moment.format('YYYY-MM-DD')
          const events = self.events.filter(event => event.start === currentDay)
          const night = events.find(event => event.shiftName === '夜班')
          const day = events.find(event => event.shiftName === '白班')
          const middle = events.find(event => event.shiftName === '中班')
          args[1].html(`<div class="wrapper">
                        <div class="header"></div>
                        <div class="schedules">
                          <div class="night"></div>
                          <div class="day"></div>
                          <div class="middle"></div>
                        </div>
                      </div>`)
          // 班组过滤高亮，当用户不选择班组下的人时，认为用户想过滤班组
          if (self.selectTeam !== '' && self._.isEmpty(self.selectUsers)) {
            if (night && night.team === self.selectTeam) {
              args[1].find('.schedules>.night').addClass('team-hightlight')
            } else if (day && day.team === self.selectTeam) {
              args[1].find('.schedules>.day').addClass('team-hightlight')
            } else if (middle && middle.team === self.selectTeam) {
              args[1].find('.schedules>.middle').addClass('team-hightlight')
            }
          } else {
            args[1].find('.schedules>.night').removeClass('team-hightlight')
            args[1].find('.schedules>.day').removeClass('team-hightlight')
            args[1].find('.schedules>.middle').removeClass('team-hightlight')
          }
          args[1].find('.schedules>.night').append(self.renderCustomEvent(night))
          args[1].find('.schedules>.day').append(self.renderCustomEvent(day))
          args[1].find('.schedules>.middle').append(self.renderCustomEvent(middle))
        },
        eventRender(...args) {
          args[1].css('display', 'none')
        },
        // eventDestroy(event) {
        //   console.log('eventDestroy1', event)
        //   if (self.sync) {
        //     self.events = self.cal.fullCalendar('clientEvents')
        //   }
        // },
        eventClick(...args) {
          console.log(args)
        }
      }
    }
  },
  watch: {
    // events: {
    //   deep: true,
    //   handler(val) {
    //     this.calendar.fullCalendar('removeEvents')
    //     this.calendar.fullCalendar('addEventSource', val)
    //   }
    // },
    // 日历视图切换
    viewUser() {
      this.$nextTick(() => {
        if (this.viewUser) {
          this.$('.fc .fc-view-container .fc-month-view .fc-bg .users').removeClass('hidden')
          this.$('.fc .fc-view-container .fc-month-view .fc-scroller .fc-row').css('height', '205px')
        } else {
          this.$('.fc .fc-view-container .fc-month-view .fc-bg .users').addClass('hidden')
          this.$('.fc .fc-view-container .fc-month-view .fc-scroller .fc-row').css('height', '100px')
        }
      })
    },
    selectUnit() {
      this.selectUnitName = this.unitList.find(e => e.id === this.selectUnit).name
      // 切换工序, 班组，人员级联变动
      this.getTeamsByUnit()
      this.getUsersByTeam()
    }
  },
  mounted() {
    // 初始化排班表
    this.calendar = this.$('#vue-full-calendar')
    this.calendar.fullCalendar(this.defaultConfig)
    // 取排班数据
    // this.getEvents()
  },

  beforeDestroy() {
    // TODO
  },
  methods: {
    deleteSelectPoolUsers() {
      const leftUsers = this.changeForm.shiftUserList.filter(user => !this.selectPoolUsers.has(user.userId))
      this.changeForm.shiftUserList = leftUsers
      this.selectPoolUsers.clear()
    },
    toggleSelectPoolUser(userId, event) {
      this.$(event.target).hasClass('hightlight') ? this.$(event.target).removeClass('hightlight') : this.$(event.target).addClass('hightlight')
      this.selectPoolUsers.has(userId) ? this.selectPoolUsers.delete(userId) : this.selectPoolUsers.add(userId)
    },
    async getTreeData() {
      await this.$api.system.organization.tree()
        .then(res => {
          if (res.status === this.constant.REQUEST_SUCCESS) {
            this.treeData = res.data
          }
        }).finally(() => {
          return
        })
    },
    async getSceduleData() {
      console.log(this.scheduleId)
      const data = {
        currentTeam: '1174302973382856705',
        currentTeamName: '硝酸-甲班',
        modifyFlag: '',
        shift: 'MID',
        shiftDate: '2019-10-03T22:15:40.000Z',
        shiftUserList: [
          {
            team: '1174302973382856705',
            teamName: '硝酸-甲班',
            userId: '1',
            userName: '周大喵',
            account: '1',
            modifyFlag: ''
          },
          {
            team: '1174302973382856705',
            teamName: '硝酸-甲班',
            userId: '2',
            userName: '陈奕迅',
            account: '2',
            modifyFlag: ''
          },
          {
            team: '1174302973382856705',
            teamName: '硝酸-甲班',
            userId: '3',
            userName: '周杰伦',
            account: '3',
            modifyFlag: ''
          }
        ],
        team: '1174302973382856705',
        teamName: '硝酸-甲班',
        unitId: '1174183681725054978',
        unitName: '硝酸工序',
        updateName: '周大喵',
        updateTime: '2019-10-01T02:15:40.000Z'
      }
      this.changeForm = data
      return
    },
    getShiftList() {
      getItemByTypeCode(this.constant.DICTIONARY_TYPE_CODES.SHIFT).then(res => {
        this.shiftList = res.data
      })
    },
    // 调整弹框数据初始化
    initSchedule() {
      this.getShiftList()
      this.selectPoolUsers.clear()
      Promise.all([this.getSceduleData(), this.getTreeData()]).then(() => {
        console.log('this.changeForm', this.changeForm)
        this.selectedOrgIdArr = getTreeDeepArr(this.changeForm.unitId, this.treeData)
        console.log('this.selectedOrgIdArr', this.treeData)
      })
    },
    parentChanged(visible) {
      if (!visible && this.selectedOrgIdArr && this.selectedOrgIdArr.length > 0) {
        this.changeForm.unitId = this.selectedOrgIdArr[this.selectedOrgIdArr.length - 1]
      }
    },
    // 切换当前工序
    changeUnitOption() {
      // 获取工序下的排班计划
      this.getEvents()
    },
    // getTeamsByUnitId(unitId) {
    //   this.selectTargetTeam = ''
    //   this.targetTeams = [
    //     {
    //       id: '1174302973382856705', code: 'A', name: '硝酸-甲班'
    //     },
    //     {
    //       id: '1174303026486939649', code: 'B', name: '硝酸-乙班'
    //     },
    //     {
    //       id: '1174303231592599554', code: 'C', name: '硝酸-丙班'
    //     },
    //     {
    //       id: '1174303268766715905', code: 'D', name: '硝酸-丁班'
    //     }
    //   ]
    //   if (this.selectUnit === '1100505') {
    //     this.teams = [
    //       {
    //         id: '11743029733828567051', code: 'A', name: '甲醛-甲班'
    //       },
    //       {
    //         id: '11743030264869396491', code: 'B', name: '甲醛-乙班'
    //       },
    //       {
    //         id: '11743032315925995541', code: 'C', name: '甲醛-丙班'
    //       },
    //       {
    //         id: '11743032687667159051', code: 'D', name: '甲醛-丁班'
    //       }
    //     ]
    //   }
    // },
    // 根据工序获得班组
    getTeamsByUnit() {
      this.selectTeam = ''
      this.teams = [
        {
          id: '1174302973382856705', code: 'A', name: '硝酸-甲班'
        },
        {
          id: '1174303026486939649', code: 'B', name: '硝酸-乙班'
        },
        {
          id: '1174303231592599554', code: 'C', name: '硝酸-丙班'
        },
        {
          id: '1174303268766715905', code: 'D', name: '硝酸-丁班'
        }
      ]
      if (this.selectUnit === '1100505') {
        this.teams = [
          {
            id: '11743029733828567051', code: 'A', name: '甲醛-甲班'
          },
          {
            id: '11743030264869396491', code: 'B', name: '甲醛-乙班'
          },
          {
            id: '11743032315925995541', code: 'C', name: '甲醛-丙班'
          },
          {
            id: '11743032687667159051', code: 'D', name: '甲醛-丁班'
          }
        ]
      }
    },
    // 根据班组获得用户
    getUsersByTeam() {
      this.selectUsers = []
      this.checkAll = false
      this.isIndeterminate = false
      this.teamUsers = []
      if (this.selectTeam === '1174302973382856705') {
        this.teamUsers = [
          { id: '1', name: '周大喵', account: '1' },
          { id: '2', name: '陈奕迅', account: '2' },
          { id: '3', name: '周杰伦', account: '3' }]
      } else if (this.selectTeam === '1174303026486939649') {
        this.teamUsers = [
          { id: '4', name: '胡歌', account: '4' },
          { id: '5', name: '李大嘴', account: '5' },
          { id: '6', name: '巴拉', account: '6' }]
      } else if (this.selectTeam === '1174303231592599554') {
        this.teamUsers = [
          { id: '7', name: '大伤脑', account: '7' },
          { id: '8', name: '山东省', account: '8' },
          { id: '9', name: 'DSD酸', account: '9' }]
      } else if (this.selectTeam === '1174303268766715905') {
        this.teamUsers = [
          { id: '10', name: '今晚', account: '10' },
          { id: '11', name: '等等我', account: '11' },
          { id: '12', name: '的完成', account: '12' }]
      } else if (this.selectTeam === '11743029733828567051') {
        this.teamUsers = [
          { id: '11', name: '张三', account: '11' },
          { id: '22', name: '李四', account: '22' },
          { id: '33', name: '王五', account: '33' }]
      } else if (this.selectTeam === '11743030264869396491') {
        this.teamUsers = [
          { id: '44', name: '周念念', account: '44' },
          { id: '55', name: '孙小念', account: '55' },
          { id: '66', name: '周小团', account: '66' }]
      } else if (this.selectTeam === '11743032315925995541') {
        this.teamUsers = [
          { id: '77', name: '而卧', account: '77' },
          { id: '88', name: '分分', account: '88' },
          { id: '99', name: '而非分', account: '99' }]
      } else if (this.selectTeam === '11743032687667159051') {
        this.teamUsers = [
          { id: '101', name: '放到', account: '101' },
          { id: '111', name: '发大幅度', account: '111' },
          { id: '121', name: '热热热', account: '121' }]
      }
    },
    generateEvents() {
      const result = []
      for (let i = 1; i <= 30; i++) {
        for (let j = 1; j <= 3; j++) {
          result.push({
            scheduleId: '1', // 排班计划
            team: this.teams[j - 1].id,
            teamName: this.teams[j - 1].name,
            shiftName: `${j === 1 ? '夜' : j === 2 ? '白' : '中'}班`, // 班次
            shiftDate: this.month + '-' + (i < 10 ? '0' : '') + i + 'T02:15:40.000Z', // 排班日期, 0时区时间
            shiftUserList: this.generateUser(this.teams[j - 1].id),
            isModified: (i === 5 || i === 7) && j === 1 ? 'YES' : 'NO'
          })
        }
      }
      return result
    },
    generateUser(teamId) {
      let result = []
      if (teamId === '1174302973382856705') {
        result = [
          { userId: '1', userName: '周大喵', account: '1', isModified: 'NO' },
          { userId: '2', userName: '陈奕迅', account: '2', isModified: 'NO' },
          { userId: '3', userName: '周杰伦', account: '3', isModified: 'NO' },
          { userId: '4', userName: '胡歌', account: '4', isModified: 'YES' }
        ]
      } else if (teamId === '1174303026486939649') {
        result = [
          { userId: '4', userName: '胡歌', account: '4', isModified: 'NO' },
          { userId: '5', userName: '李大嘴', account: '5', isModified: 'NO' },
          { userId: '6', userName: '巴拉', account: '6', isModified: 'NO' }]
      } else if (teamId === '1174303231592599554') {
        result = [
          { userId: '7', userName: '大伤脑', account: '7', isModified: 'NO' },
          { userId: '8', userName: '山东省', account: '8', isModified: 'NO' },
          { userId: '9', userName: 'DSD酸', account: '9', isModified: 'NO' }]
      } else if (teamId === '1174303268766715905') {
        result = [
          { userId: '10', userName: '今晚', account: '10', isModified: 'NO' },
          { userId: '11', userName: '等等我', account: '11', isModified: 'NO' },
          { userId: '12', userName: '的完成', account: '12', isModified: 'NO' }]
      } else if (teamId === '11743029733828567051') {
        result = [
          { userId: '11', userName: '张三', account: '11', isModified: 'NO' },
          { userId: '22', userName: '李四', account: '22', isModified: 'NO' },
          { userId: '33', userName: '王五', account: '33', isModified: 'NO' }]
      } else if (teamId === '11743030264869396491') {
        result = [
          { userId: '44', userName: '周念念', account: '44', isModified: 'NO' },
          { userId: '55', userName: '孙小念', account: '55', isModified: 'NO' },
          { userId: '66', userName: '周小团', account: '66', isModified: 'NO' },
          { userId: '11', userName: '张三', account: '11', isModified: 'YES' }]
      } else if (teamId === '11743032315925995541') {
        result = [
          { userId: '77', userName: '而卧', account: '77', isModified: 'NO' },
          { userId: '88', userName: '分分', account: '88', isModified: 'NO' },
          { userId: '99', userName: '而非分', account: '99', isModified: 'NO' }]
      } else if (teamId === '11743032687667159051') {
        result = [
          { userId: '101', userName: '放到', account: '101', isModified: 'NO' },
          { userId: '111', userName: '发大幅度', account: '111', isModified: 'NO' },
          { userId: '121', userName: '热热热', account: '121', isModified: 'NO' }]
      }
      return result
    },
    // 获取排班计划
    getEvents() {
      // 如果 unitId 不传， 取当前用户下默认的班组
      // 如果 month 不传， 取当前月份 格式： 2019-09
      const condition = {
        unitId: this.selectUnit,
        month: this.month
      }
      console.log('查询条件...', condition)
      this.events = []
      let data = {
        unitList: [
          { id: '1174183681725054978', label: '硝酸工序' },
          { id: '1100505', label: '甲醛工序' }
        ],
        unitId: '1174183681725054978',
        unitName: '硝酸工序',
        scheduleList: []
      }
      if (condition.unitId === '1100505') {
        data = {
          unitList: [
            { id: '1174183681725054978', label: '硝酸工序' },
            { id: '1100505', label: '甲醛工序' }
          ],
          unitId: '1100505',
          unitName: '甲醛工序',
          scheduleList: []
        }
      }
      this.unitList = data.unitList
      this.selectUnit = data.unitId
      this.selectUnitName = data.unitName
      setTimeout(() => {
        data.scheduleList = this.generateEvents()
        // 原始数据转化
        data.scheduleList.forEach(item => {
          item.start = this.moment(item.shiftDate).format('YYYY-MM-DD')
          this.events.push(item)
        })
        // 刷新排班表
        this.calendar.fullCalendar('option', 'weekends', true)
      }, 1000)
    },
    // 调班
    doChangeTeam() {
      const team = this.teams.find(item => item.id === this.changeForm.currentTeam)
      this.changeForm.currentTeamName = team.name
      this.showChangeTeamDialog = false
    },
    changeTeam() {
      this.showChangeTeamDialog = true
    },
    // 调人
    doChangeUsers() {
      this.showChangeUsersDialog = false
    },
    changeUsers() {
      this.showChangeUsersDialog = true
    },
    // 调整
    doChange() {
      this.showChangeDialog = false
    },
    doFilter() {
      this.showFilterDialog = false
      this.calendar.fullCalendar('option', 'weekends', true)
    },
    handleUserChange() {
      this.isIndeterminate = this.selectUsers.length > 0 && this.selectUsers.length < this.teamUsers.length
      this.checkAll = this.selectUsers.length === this.teamUsers.length
    },
    handleCheckAllChange(val) {
      this.selectUsers = val ? this.teamUsers.map(e => e.id) : []
      this.isIndeterminate = false
    },
    changeTeamOption() {
      this.checkAll = false
      this.isIndeterminate = false
      this.getUsersByTeam()
    },
    renderCustomEvent(event) {
      return event ? `<div class="${event && event.isModified === 'YES' ? 'team-modified' : ''}">${event ? event.teamName : ''}</div>
                          <div class="users ${this.viewUser ? '' : 'hidden'}">
                            <span class="${event.shiftUserList[0] ? '' : 'hidden'} user ${event.shiftUserList[0] && this.selectUsers.includes(event.shiftUserList[0].userId) ? 'hightlight' : ''} ${event.shiftUserList[0] && event.shiftUserList[0].isModified === 'YES' ? 'modified' : ''}">${event.shiftUserList[0] ? event.shiftUserList[0].userName : ''}</span>
                            <span class="${event.shiftUserList[1] ? '' : 'hidden'} user ${event.shiftUserList[1] && this.selectUsers.includes(event.shiftUserList[1].userId) ? 'hightlight' : ''} ${event.shiftUserList[1] && event.shiftUserList[1].isModified === 'YES' ? 'modified' : ''}">${event.shiftUserList[1] ? event.shiftUserList[1].userName : ''}</span>
                            <span class="${event.shiftUserList[2] ? '' : 'hidden'} user ${event.shiftUserList[2] && this.selectUsers.includes(event.shiftUserList[2].userId) ? 'hightlight' : ''} ${event.shiftUserList[2] && event.shiftUserList[2].isModified === 'YES' ? 'modified' : ''}">${event.shiftUserList[2] ? event.shiftUserList[2].userName : ''}</span>
                            <span class="${event.shiftUserList[3] ? '' : 'hidden'} user ${event.shiftUserList[3] && this.selectUsers.includes(event.shiftUserList[3].userId) ? 'hightlight' : ''} ${event.shiftUserList[3] && event.shiftUserList[3].isModified === 'YES' ? 'modified' : ''}">${event.shiftUserList[3] ? event.shiftUserList[3].userName : ''}</span>
                            <span class="${event.shiftUserList[4] ? '' : 'hidden'} user ${event.shiftUserList[4] && this.selectUsers.includes(event.shiftUserList[4].userId) ? 'hightlight' : ''} ${event.shiftUserList[4] && event.shiftUserList[4].isModified === 'YES' ? 'modified' : ''}">${event.shiftUserList[4] ? event.shiftUserList[4].userName : ''}</span>
                            <span style="padding-left:10px;padding-top:2px;padding-bottom:2px;float;right;">${event.shiftUserList[5] ? '...' : ''}</span>
                          </div>` : ''
    }
  }
}
</script>
<style lang="scss">
.fc .fc-view-container *, .fc-view-container::before, .fc-view-container::after{
  box-sizing: border-box!important;
}
.fc .fc-view-container .fc-month-view  {
  .fc-scroller{
    overflow: hidden!important;
    .fc-row{
      height:205px;
    }
  }
  .fc-bg{
    .fc-day{
      .wrapper{
        height:100%;
        display: flex;
        flex-direction: column;
        .header{
          height:22px;
          border-bottom: 1px solid #ddd;
        }
        .schedules{
          height:100%;
          flex:1;
          display: flex;
          flex-direction: row;
          &>div{
            flex:1;
            width:0px;
            border-right: 1px solid #ddd;
            cursor: pointer;
            &:hover{
              background-color: #f2f6fc;
            }
          }
          &>div:last-child{
            border-right: 0px;
          }
          .users{
            color:#808080;
            padding-top:5px;
            font-size:14px;
          }
          .hidden{
            display:none!important;
          }
          .user{
            display: block;
            padding:2px;
            margin: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            border:1px solid #ddd;
            border-radius: 5px;
            &:hover{
              border:1px solid #c0c4cc;
              color:#909399;
            }
          }
          .hightlight{
            background-color: yellow;
          }
          .modified{
            border-color: orange;
          }
          .team-hightlight{
            background-color: yellow;
          }
          .team-modified{
            font-weight: 900
          }
        }
      }
    }
  }
  .fc-content-skeleton{
    .fc-day-top{
      border-bottom: 1px solid #ddd;
      span{
        display:block;
        float: none!important;
        text-align:center;
      }
    }
    .fc-event-container{
      .event-wrapper{
        height:100%;
        display:flex;
        flex-direction: row;
        a{
          flex:1;
        }
        .fc-event{
          border: 0px;
          border-radius: 0px;
        }
      }
      .fc-title{
        color: #000;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
  .change-dialog {
    .left-tab {
      width:200px;
      float:left;
      margin-right:20px;
    }
    .right-tab {
      height:300px;
      float:right;
      width:580px;
      .user-pool {
        border:1px solid #ddd;
        width:570px; height:190px;
        .hightlight{
          background-color: #1890FF;
          color: #fff;
        }
        .user{
          display:inline-block;
          line-height:15px;
          padding:2px 15px;
          margin:5px;
          border: 1px solid #ddd;
          border-radius: 15px;
          cursor: pointer;
          &:hover{
            border: 1px solid #1890FF;
          }
        }
      }
    }
  }
</style>
